<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项列表</title>
</head>
<body>
        <div id="app">
                <header>
                  <h1>待办事项列表</h1>
                  <h2>TodoList......</h2>
                </header>
            
                <div>
                  <!-- <input type="text" placeholder="请输入新待办事项" :value="inputValue" @input="handleInput"> -->
                  <input
                    ref="input"
                    type="text"
                    placeholder="请输入新待办事项"
                    v-model.trim="inputValue"
                    @keydown.enter="addTodoItem"
                  >
                  <button @click="addTodoItem">添加</button>
                </div>
            
                <hr>
                <button>所有(2)</button>
                <button>已完成(1)</button>
                <button>未完成(1)</button>
                <h2>所有待办事项：</h2>
                <ul v-show="todos.length">
                  <li
                    v-for="todo in todos"
                  >
                    <span>{{ todo.title }} - {{ todo.completed ? '已完成' : '未完成' }}</span>
                    <button v-on:click="toggleTodoItem(todo.id)">标记为{{ todo.completed ? '未' : '已' }}完成</button>
                    <button @click="removeTodoItem(todo.id)">删除</button>
                  </li>
                </ul>
                <div v-show="!todos.length">待办事项列表为空，请添加新待办事项！</div>
              </div>
            
              <script src="../lib/vue.js"></script>
              <script>
                let index = 3
                const vm = new Vue({
                  el: '#app',
                  data: {
                    // todos 数组中保存所有待办事项的内容
                    todos: [
                      {
                        id: 1, // 编号
                        title: '复习 HTML', // 待办事项内容
                        completed: false // 是否已完成
                      },
                      {
                        id: 2, // 编号
                        title: '学习 Vue', // 待办事项内容
                        completed: true // 是否已完成
                      },
                    ],
                    // inputValue 中保存文本框中输入的数据
                    inputValue: '初始数据'
                  },
                  methods: {
                    // 切换待办事项状态
                    toggleTodoItem(id) {
                      this.todos.forEach(todo => {
                        if (todo.id === id) {
                          todo.completed = !todo.completed
                        }
                      })
                    },
                    // 删除待办事项
                    removeTodoItem(id) {
                      this.todos = this.todos.filter(todo => todo.id !== id)
                    },
                    // 添加待办事项
                    addTodoItem() {
                      // 如果未输入，则结束方法调用
                      if (this.inputValue.length === 0) {
                        return
                      }
                      // 向数组中添加新待办事项元素
                      this.todos.push({
                        id: index++,
                        title: this.inputValue,
                        completed: false
                      })
                      // 清空文本框
                      this.inputValue = ''
                      // 让文本框获得焦点
                      this.$refs.input.focus()
                      // document.getElementById('input').focus()
                    },
                    // 文本框输入事件处理程序
                    // handleInput(e) {
                    //   console.log('in', e.target.value)
                    //   this.inputValue = e.target.value
                    // }
                    // 回车，添加新待办事项
                    // handleKeydown(e) {
                    //   if (e.keyCode === 13) {
                    //     this.addTodoItem()
                    //   }
                    // }
                  }
                })
              </script>
</body>
</html>